<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>总结Vue数据监测</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <!--
        Vue监视数据的原理:
            1.Vue会监视data中所有层次的数据

            2.如何监测对象中的数据?
                通过setter实现监视，且要在new Vue时就传入要监测的数据
                    （1）对象中后追加的属性，Vue默认不做响应式处理
                    （2）如需给后添加的属性做响应式，请使用如下API：
                        Vue.set(target, propertyName/index, value) 或
                        vm.$set(target, propertyName/index, value)

            3.如何监测数组中的数据?
                通过包裹数组更新原生的方法来实现，本质就是做了两件事：
                    （1）调用原生对应的方法对数组进行更新
                    （2）重新解析模板，进而更新页面

            4.在Vue修改数组中的某个元素一定要用如下方法：
                （1）使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                （2）Vue.set() 或 vm.$set()

            特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性

            “数据劫持”也就是把data配置项变成一组一组的getter/setter放到_data上的这种操作
     -->

    <div id="root">
      <h1>学生信息</h1>

      <button @click="student.age++">年龄+1岁</button><br /><br />
      <button @click.once="addSex">添加性别属性，默认值男</button><br /><br />
      <button @click="student.sex = student.sex === '男' ? '女' : '男'">
        修改性别</button
      ><br /><br />
      <button @click.once="addFriend">在列表首位添加一位朋友</button
      ><br /><br />
      <button @click="updateFirstFriendAge">更新第一位朋友的年龄为 25</button
      ><br /><br />
      <button @click="addHobby">添加一个爱好</button><br /><br />
      <button @click="updateFirstHobby">更新第一个爱好为---学习</button
      ><br /><br />
      <button @click="removeRap">过滤掉爱好---rap</button><br /><br />
      <h2>姓名：{{student.name}}</h2>
      <h2>年龄：{{student.age}}</h2>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>爱好</h2>
      <ul>
        <li v-for="(v,index) in student.hobbies" :key="index">{{v}}</li>
      </ul>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}-{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // push、pop、shift、unshift、splice、sort、reverse
    const vm = new Vue({
      el: "#root",
      data: {
        student: {
          name: "jerry",
          age: 34,
          hobbies: ["唱", "跳", "rap", "篮球"],
          friends: [
            { name: "tom", age: 35 },
            { name: "jennie", age: 27 },
          ],
        },
      },
      methods: {
        addSex() {
          // Vue.set(this.student, 'sex', '男');
          this.$set(this.student, "sex", "男");
        },
        addFriend() {
          this.student.friends.unshift({ name: "lisa", age: 26 });
        },
        updateFirstFriendAge() {
          this.student.friends[0].age = 25;
        },
        addHobby() {
          this.student.hobbies.push("吃");
        },
        updateFirstHobby() {
          // this.student.hobbies.splice(0, 1, '学习');
          Vue.set(this.student.hobbies, 0, "学习");
        },
        removeRap() {
          this.student.hobbies = this.student.hobbies.filter((h) => {
            return h !== "rap";
          });
        },
      },
    });
  </script>
</html>
